import React from "react";

import '@/assets/css/order_info.css'

const Info = () => {
    const [searchParams] = React.Router.useSearchParams()

    let [id, SetId] = React.useState(searchParams.get('id') ? searchParams.get('id') : 0)

    let [order, SetOrder] = React.useState({
        status_text: '',
        status: 0,
        start_text: '',
        code: '',
        price: '',
        create_text: '',
        guest_text: '',
        end_text: '',
        day_text:'',
        rate: 0,
        comment: ''
    })

    let [room, SetRoom] = React.useState({
        name: '',
        thumb_text: '',
        area: 0,
        live: 0,
        id:0
    })

    React.useEffect(() => {
        OrderInfo()
    }, [])

    const OrderInfo = async () => {
        var result = await React.HTTP.post('/order/info', { id: id })

        if (result.code == 0) {
            React.error(result.msg)
            return false
        } else {
            SetOrder(result.data)
            SetRoom(result.data.room)
        }
    }


    return (
        <>
            <React.UI.NavBar back='返回' onBack={() => React.navigate(-1)}>
                订单详情
            </React.UI.NavBar>

            <div className="order_info">
                <div className="info_title">
                    <h3>{order.status_text}</h3>
                    {order.status == 2 || order.status == 3 ? 
                    <>
                        <p>感谢您的光临，请给我们打个分吧</p>
                        <button className="info_rate" onClick={() => {React.navigate(`/order/comment?orderid=${id}`)}}>立即评价</button></> : order.status == 1 ? <p>请在{order.start_text} 15:00之后办理入住</p> : order.status == -1 ? <p>请耐心等待审核结果</p> : order.status == -2 ? <p>退款通过，钱已原路返回您的账户</p> : order.status == 4 ? <p>感谢您的评价，欢迎下次光临</p> : <p>退款失败，如有疑问请联系客服</p>
                    }

                </div>
                <div className="info_content">
                    <div className="content_title">订单信息：</div>
                    <div className="content_item">
                        <p>订单单号</p>
                        <div>{order.code}</div>
                    </div>
                    <div className="content_item">
                        <p>订单金额</p>
                        <div className="content_price">￥{order.price}</div>
                    </div>
                    <div className="content_item">
                        <p>下单时间</p>
                        <div>{order.create_text}</div>
                    </div>
                    <div className="content_item">
                        <p>入住人</p>
                        <div>{order.guest_text}</div>
                    </div>
                    <div className="content_item">
                        <p>联系电话</p>
                        <div>{React.Business.mobile}</div>
                    </div>
                    <div className="content_item">
                        <p>入住时间</p>
                        <div>{order.start_text} - {order.end_text} 共 {order.day_text} 晚</div>
                    </div>
                    {order.comment ? 
                        <div className="content_item">
                            <p>评分</p>
                            <div><React.UI.Rate readOnly value={order.rate} /></div>
                        </div> : ''
                    }
                    
                    {order.comment ? 
                        <div className="content_item">
                            <p>评论</p>
                            <div>{order.comment}</div>
                        </div> : ''
                    }
                    
                </div>
                <div className="info_footer">
                    <div className="content_title">房屋信息：</div>
                    <div className="detail" onClick={() => React.navigate(`/room/info?rid=${room.id}`)}>
                        <div className="thumb">
                            <React.UI.Image src={room.thumb_text} />
                        </div>
                        <div className="right">
                            <p>{room.name}</p>
                            <div className="tips">
                                <span>{room.area}㎡</span>
                                <span>宜住{room.live}人</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Info;